import React, { Component } from 'react'
import './style.css'
export default class App extends Component {
  constructor(){
    super();
    this.state = {
      num: 0
    }
  };
  render() {
    return (
      <div style={{maxWidth:800,margin:'50px auto'}}>
        <button 
          onClick = { () => { this.tabChange(0) } }
          className={this.state.num === 0 ? 'active':''}>1</button>
        <button 
          onClick = { () => { this.tabChange(1) } }
          className={this.state.num === 1 ? 'active':''}>2</button>
        <button 
          onClick = { () => { this.tabChange(2) } }
          className={this.state.num === 2 ? 'active':''}>3</button>
        
        {
          this.state.num === 0
          &&
          <div className="content">1</div>
        }
        {
          this.state.num === 1
          &&
          <div className="content">2</div>
        }
        {
          this.state.num === 2
          &&
          <div className="content">3</div>
        }
      </div>
    )
  };
  tabChange = (index) => {
    this.setState({
      num: index
    })
  }
}
